<template>
	<div class="goods" v-loading="loading">
		<div class="header-layout">
			<a class="back iconfont icon-fanhui" @click="goBack"></a>
			<h2 class="title">物品详情</h2>
		</div>
		<div class="goods__content">
			<s-user-list-top :data="userInfo" @getUserInfo="showUserInfo"></s-user-list-top>
			<s-goods-img-text :data="goodsInfo"></s-goods-img-text>
			<s-goods-contact :data="contact"></s-goods-contact>
			<s-goods-leave-message></s-goods-leave-message>
		</div>
	</div>
</template>

<script>
	import { fetchGoodsDetail } from "../../../api/api.js"
	export default {
		created() {
			this.getGoodsDetail();
		},
		data() {
			return {
				loading: true,
				userInfo: null,
				goodsInfo: null,
				contact: null
			}
		},
		methods: {
			goBack() {
				this.$router.go(-1);
			},
			getGoodsDetail() {
				this.loading = true;
				fetchGoodsDetail().then( res => {
					this.loading = false;
					this.userInfo = res.data.result.userInfo;
					this.goodsInfo = res.data.result.goodsInfo;
					this.contact = res.data.result.contact;
				} ).catch( err => {
					alert(err);
					console.log(err);
				} );
			},	
			showUserInfo() {
				this.$router.push("/user_info");
			},
		},			
	}
</script>

<style lang="scss" scoped>
	.goods {
		min-height: rem(300);
	}
	.person__top {
		padding: $com-padding-lr-base;
		border-bottom: 1px solid #eee;
	}
	.goods__content {
		margin-bottom: 3rem;
	}
	.goods__bottom {
		border-top: 1px solid #eee;
		position: fixed;
		bottom: 0;
	}
	
</style>